이스트캠프 HTML CSS 퀴즈 4

📘 오늘 학습한 내용

1️⃣ form 태그

• form 태그, input 태그

2️⃣ Emmet

• Emmet과 단축키

3️⃣ 검색엔진 최적화와 사이트 최적화

4️⃣ CDN

• CDN(Content Delivery Network)

📝 퀴즈

🧩 퀴즈 1

Q. 아래 이미지의 form에서 사용할 것으로 예상되는 태그는 어떤 것이 있나요?

📝 나의 답변:

<label>, <input>, <select>, <option>, <textarea>

🧩 퀴즈 2

Q. 회원가입 페이지를 만들어보세요. 1번의 이미지 내의 요소가 모두 포함되어야합니다.

📝 나의 답변:

<div class="container">
	<h1>회원가입</h1>
	<form action="/main" method="post" class="login-form">
		<fieldset>
			<legend>사용자 정보</legend>
			<div class="input-box">
				<label for="username">이름:</label>
				<input type="text" name="username">
			</div>
			<div class="input-box">
				<label for="email">이메일:</label>
				<input type="email" name="email">
			</div>
			<div class="input-box">
				<label for="male">남자</label>
				<input type="radio" name="male">
				<label for="female">여자</label>
				<input type="radio" name="female">
			</div>
		</fieldset>

		<div class="input-box">
			<label for="country">국가:</label>
			<select name="country">
				<option value="ko">대한민국</option>
				<option value="us">미국</option>
				<option value="uk">영국</option>
				<option value="cn">중국</option>
				<option value="jp">일본</option>
			</select>
		</div>
		
		<div class="input-box">
			<label for="message">메시지:</label>
			<textarea name="message" placeholder="메시지를 작성해주세요"></textarea>
		</div>
		
		<div class="input-box">
			<input type="checkbox" name="subscribe">
			<label for="subscribe">뉴스레터를 구독합니다</label>
		</div>

		<div class="btn-wrap">
			<input type="submit" value="가입">
		</div>
	</form>
</div>

/* 전체 설정 */
*{box-sizing: border-box; margin: 0; padding: 0;}
.container{
	width: 100%;
	margin:0;
	padding: 30px 0;
	height: max-content;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
	background-color: rgb(255, 232, 236);
}

h1{
	margin-bottom: 10px;
}

/* form 스타일 */
.login-form{
	padding: 20px;
	border: 1px solid rgb(252, 144, 162);
	border-radius: 10px;
}

input, textarea, select{
	margin: 0 10px;
	padding:10px;
	height: 20px;
	background-color: white;
	border:none;
	border-radius: 10px;
}

textarea{
	height: 200px;
	overflow-y: scroll;
}

fieldset{
	padding: 10px;
	border: 1px solid rgb(252, 144, 162);
	border-radius: 10px;
}

.login-form div{
	margin: 30px 10px;
}

.btn-wrap{
	display: flex;
	justify-content: flex-end;
}

.input-box{
	display: flex;
	align-items: center;
}

.btn-wrap input{
	padding: 5px 20px;
	height: max-content;
	font-size: 1rem;
	border-radius: 10px;
	border:none;
	background-color:pink;
}